﻿<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath();
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>服务器监控</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0" />
<!-- layui.css -->
<script src="<%=path%>/resource/js/jquery-2.2.4.min.js"></script>
<script src="<%=path%>/resource/js/workutil.js"></script>
<link href="<%=path%>/resource/layui/css/layui.css" rel="stylesheet" />
<link href="<%=path%>/resource/plugin/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="<%=path%>/resource/css/main.css" rel="stylesheet" />
<script src="<%=path%>/resource/echarts/Chart.min.js"></script>
<style>
.layui-body {
	bottom: 0px !important;
}
.card img{
    border-radius: 100%;
	width: 150px;
    height: 150px;
    border: 1px solid #fbfbfb;
}
.card img:HOVER{
	border: 1px solid #ccc;
	-webkit-box-shadow:inset 0 0 10px #0CC;  
  	-moz-box-shadow:inset 0 0 10px #0CC;  
  	box-shadow:inset 0 0 10px #0CC;  
}
.card {
	float: left;
	position: relative;
	margin-right: 10px;
	cursor: pointer;
}

.card div {
	text-align: center;
    font-size: 20px;
    line-height: 25px;
}
#content-frame{
	z-index: 999999;
    top: 0px;
    border: 0px;
    position: absolute;
}
.fa-reply-all{
	z-index: 99999999;
	position: absolute;
	left: 2px;
	top: 2px;
	font-size: 25px;
	color: white;
	display: none;
	cursor: pointer;
}
.table-hosts th{
	border-top: 1px solid #ccc;
	background-color: #e2e2e2;
}
.table-hosts td:FIRST-CHILD,.table-hosts th:FIRST-CHILD{
	border-left: 1px solid #ccc;
	cursor: pointer;
}
.table-hosts td ,.table-hosts th{
	padding: 10px 6px;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
</style>
</head>
<body>
	<div class="layui-layout layui-layout-admin">
		<!--顶部-->
		<div class="layui-header">
			<span class="sys-title">服务器监控</span>
			<div  class="ht-nav">
				<span id="currentTime"></span>
			</div>
		</div>
		<!--侧边导航-->
		<div class="layui-side">
			<div class="layui-side-scroll">
				<ul class="layui-nav layui-nav-tree" lay-filter="leftnav" id="menu-nav">
				 <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;"><i class="fa fa-file-text"></i>数据管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-url="hosts" data-id="11">机器列表</a></dd>
                        <dd><a href="javascript:;" data-url="history" data-id="11">查看历史</a></dd>
                        <dd><a href="javascript:;" data-url="used" data-id="11">资源使用情况</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="fa fa-file-text"></i>系统配置</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-url="synData" data-id="1">同步数据</a></dd>
                    </dl>
                </li>
				</ul>
			</div>
		</div>
		<!--主体内容-->
		<div class="layui-body" style="font-size: 20px;" id="layui-body">
		</div>
	</div>
	<script src="<%=path%>/resource/layui/layui.js"></script>
	<!-- layui规范化用法 -->
	<script type="text/javascript">
		var rootpath = '<%=path%>'+'/page/';
		workUtils.rootPath =rootpath;
		var menuJson = null;
		var element = null;
		var form;
		var laydate;
		var layer;
		layui.define([ 'element', 'layer', 'form', 'laydate' ], function(exports) {
			layer = layui.layer;
			element = layui.element;
			form = layui.form;
			laydate = layui.laydate;
			$('div.short-menu').click(function(e) {
				e.stopPropagation();
			});
			element.on('nav(leftnav)', function(elem) {
				var elea = $(elem).children('a');
				openMenu(elea);
			});
			$(".layui-nav-child a").first().click();
		});
		function openMenu(c){
			var url = $(c).data("url");
			workUtils.html({
				id:"layui-body",
				url:workUtils.rootPath+url
			});
		}
	</script>
</body>
</html>